<template>
  <div class="prescription-container">
    <div class="patient-info">
      <h3>患者信息</h3>
      <table>
        <tr>
          <td>患者姓名</td>
          <td>张三</td>
          <td>性别</td>
          <td>男</td>
          <td>年龄</td>
          <td>43</td>
          <td>手机号码</td>
          <td>18812341234</td>
        </tr>
        <tr>
          <td>所患疾病</td>
          <td>高血压</td>
          <td>肝功能</td>
          <td>正常</td>
          <td>肾功能</td>
          <td>正常</td>
          <td>生育疾患</td>
          <td>无</td>
        </tr>
        <tr>
          <td>过敏史</td>
          <td colspan="7">无</td>
        </tr>
        <tr>
          <td>病情描述</td>
          <td colspan="7">高血压，目前吃络活喜 苯磺酸氨氯地平片，病情稳定，没有不良反应</td>
        </tr>
      </table>
    </div>

    <!-- 触发模态框的按钮 -->
    <div>
<span style="color: blue; cursor: pointer; margin-left: 20px;" @click="showModal = true">查看处方</span>


    <!-- 模态框 -->
    <div v-if="showModal" class="modal">
    <div class="modal-content">
          <span class="close" @click="showModal = false">&times;</span>
          <img :src="prescriptionImageUrl" alt="" class="modal-image" />
    </div>
    </div>
    </div>

    <div class="prescription-info">
      <h3>处方信息</h3>
      <table>
        <tr>
          <td>处方编号</td>
          <td>CF345465787</td>
          <td>开单时间</td>
          <td>2024-04-05 12:20:11</td>
          <td>处方状态</td>
          <td class="status">未审核</td>
        </tr>
        <tr>
          <td>开方医生</td>
          <td>张三</td>
          <td>科室</td>
          <td>心内科</td>
          <td>审核时间</td>
          <td></td>
        </tr>
        <tr>
          <td>初步诊断</td>
          <td>原发性高血压</td>
          <td colspan="3"></td>
          <td></td>
        </tr>
        <tr>
          <td>处理意见</td>
          <td colspan="5">检测血压，适当运动</td>
        </tr>
        <tr>
         <h3>药品信息</h3>
        </tr>
        <tr>
  <td colspan="6">
    <img src="https://pic.baike.soso.com/ugc/baikepic2/0/20180504121511-1202105064_png_647_346_142011.jpg/800
" alt="络活喜" style="width:50px; height:50px; vertical-align:middle; margin-right:10px;">
    <p style="display:inline;">【络活喜】苯磺酸氨氯地平片</p>
    <p>规格：5mg*7片/盒</p>
    <p>口服：成人一次5mg(1片)，每天一次</p>
  </td>
</tr>
<tr>
  <td colspan="6">
    <img src="https://inews.gtimg.com/om_bt/O3ObDF19V4o6UeYQEkruOprYrRt6-gJzwrd2M3e7t9D00AA/641
" alt="倍他乐克" style="width:50px; height:50px; vertical-align:middle; margin-right:10px;">
    <p style="display:inline;">【倍他乐克】琥珀酸美托洛尔缓释片</p>
    <p>规格：47.5mg*7片/盒</p>
    <p>口服：成人一次47.5mg(1片)，每天一次</p>
  </td>
</tr>

      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      prescriptionImageUrl: 'https://selfpage-gips.cdn.bcebos.com/b0981' +
        '915400fd6327f67bafbd8dff98e.' +
        'jpg?x-bce-process=image/auto-orient,o_1/resize,w_1242,limit_1/quality,Q_86' +
        '/format,f_auto'
    }
  },
  name: 'PrescriptionDetails'//
}
</script>

<style scoped>
.status {
    color: #ff0000;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: 0px solid #888;
  width: 500px;
  max-width: 600px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-image {
  width: 100%;
  height: auto;
}
.prescription-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.patient-info, .prescription-info {
  background-color : rgba(243, 249, 255);
  padding: 10px;
  border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

h3 {
  margin-top: 0;
}
</style>
